* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#app {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #34495e;
}
.container {
  width: 800px;
  height: 800px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  transform-style: preserve-3d;
  transform: rotateX(60deg) rotateZ(30deg);
}
.box {
  width: 20%;
  height: 40%;
  margin: 20px;
  text-align: center;
  line-height: 100%;
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  position: relative;
  z-index: 100;
  transform-style: preserve-3d;
  cursor: pointer;
  transition: 0.25s;
  transform: translateZ(0px);
}
.box:hover {
  transform: translateZ(40px);
}
@mixin wall($from, $to) {
  background-size: 500%;
  background-position: $from;
  background-image: linear-gradient(
    to $to,
    #81ecec,
    #81ecec,
    #6c5ce7,
    #81ecec,
    #81ecec
  );
}
//前
.box::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px;
  transform: rotateX(90deg);
  transform-origin: bottom;

  //围墙动画
  @include wall($from: bottom, $to: top);
  animation: wall1 1.7s ease-in-out infinite;
}
//右
.box::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 100%;
  transform: rotateY(-90deg);
  transform-origin: right;

  @include wall($from: right, $to: left);
  animation: wall2 1.7s ease-in-out infinite;
}
.color {
  height: 100%;
}
//文字垂直居中用
.color::before {
  display: inline-block;
  content: "";
  height: 100%;
  vertical-align: middle;
}

@keyframes wall1 {
  0% {
    background-position: bottom;
  }
  100% {
    background-position: top;
  }
}

@keyframes wall2 {
  0% {
    background-position: right;
  }
  100% {
    background-position: left;
  }
}
